<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/mainStyle.css" />
		<style>
			html,
			body {
				background-color: white;
			}
			
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			
			.mui-icon {
				font-size: 18px;
			}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-table-view.mui-grid-view .mui-table-view-cell,.mui-table-view-cell {
				padding: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!--<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="搜索">
			</div>-->
			<div class="mui-input-row mui-search mui-plus-visible">
				<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="搜索">
			</div>
		</header>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a class="mui-control-item mui-active" href="#item1">
						<span class="mui-icon iconfont icon-shengxian"></span>
						<span class="mui-tab-label">生鲜食品</span>
					</a>
					<a class="mui-control-item" href="#item2">
						<span class="mui-icon iconfont icon-muying"></span>
						<span class="mui-tab-label">母婴用品</span>
					</a>
					<a class="mui-control-item" href="#item3">
						<span class="mui-icon iconfont icon-jiaju"></span>
						<span class="mui-tab-label">家居杂货</span>
					</a>
					<a class="mui-control-item" href="#item4">
						<span class="mui-icon iconfont icon-world"></span>
						<span class="mui-tab-label">跨境商品</span>
					</a>
					<a class="mui-control-item" href="#item5">
						<span class="mui-icon iconfont icon-jiagongshipin"></span>
						<span class="mui-tab-label">加工食品</span>
					</a>
					<a class="mui-control-item" href="#item6">
						<span class="mui-icon iconfont icon-fushi"></span>
						<span class="mui-tab-label">时尚服饰</span>
					</a>
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
				<div id="item1" class="mui-control-content mui-active">
					<div class="mui-img">
						<a href=""><img src="img/p7.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shuiguo"></span>
								<div class="mui-media-body">新鲜水果</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shengxian"></span>
								<div class="mui-media-body">海鲜水产</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-meat"></span>
								<div class="mui-media-body">猪牛羊肉</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-qindan"></span>
								<div class="mui-media-body">禽类蛋品</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shucai"></span>
								<div class="mui-media-body">新鲜蔬菜</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item2" class="mui-control-content">
					<div class="mui-img">
						<a href=""><img src="img/p8.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shipin"></span>
								<div class="mui-media-body">婴幼儿食品</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-naipingicon17812"></span>
								<div class="mui-media-body">婴幼儿用品</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-fushilei"></span>
								<div class="mui-media-body">婴幼儿服饰</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-lipinhe"></span>
								<div class="mui-media-body">礼盒专区</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-yunyingguanhuai"></span>
								<div class="mui-media-body">妈咪专区</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-wanju"></span>
								<div class="mui-media-body">文具玩具</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-jujia"></span>
								<div class="mui-media-body">居家出行</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<div class="mui-img">
						<a href=""><img src="img/p6.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-woshi"></span>
								<div class="mui-media-body">卧室</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-keting"></span>
								<div class="mui-media-body">客厅</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-canting"></span>
								<div class="mui-media-body">餐厅</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-chufang"></span>
								<div class="mui-media-body">厨房</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-pinpai"></span>
								<div class="mui-media-body">自有品牌</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shounawenjian"></span>
								<div class="mui-media-body">收纳用品</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-yushi"></span>
								<div class="mui-media-body">浴室用品</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item4" class="mui-control-content">
					<div class="mui-img">
						<a href=""><img src="img/p4.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-gehuhuazhuang"></span>
								<div class="mui-media-body">美妆健康</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-shipin"></span>
								<div class="mui-media-body">食品饮料</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-hufu"></span>
								<div class="mui-media-body">个护生活</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-muying1"></span>
								<div class="mui-media-body">母婴用品</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item5" class="mui-control-content">
					<div class="mui-img">
						<a href=""><img src="img/p5.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-rou"></span>
								<div class="mui-media-body">肉干</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-roufuguogan"></span>
								<div class="mui-media-body">果脯</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-diaoweipin"></span>
								<div class="mui-media-body">调味品</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-nongchanpin"></span>
								<div class="mui-media-body">农产干物</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item6" class="mui-control-content">
					<div class="mui-img">
						<a href=""><img src="img/p2.jpg" /></a>
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-nanzhuang"></span>
								<div class="mui-media-body">男装</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-nvzhuang"></span>
								<div class="mui-media-body">女装</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-tongzhuang"></span>
								<div class="mui-media-body">童装</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-neiyi"></span>
								<div class="mui-media-body">内衣</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-xiangbao"></span>
								<div class="mui-media-body">箱包</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-xingzhuang42"></span>
								<div class="mui-media-body">鞋履</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-meizhuang"></span>
								<div class="mui-media-body">美妆</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<span class="mui-icon iconfont icon-peishi"></span>
								<div class="mui-media-body">配饰</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init();
			//语音识别完成事件
			document.getElementById("search").addEventListener('recognized', function(e) {
				console.log(e.detail.value);
			});

			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			var showSoftInput = function() {
				if(mui.os.android) {
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					var inputElem = document.querySelector('input');
					inputElem.focus();
					inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式
				}, 200);
			};
			mui.plusReady(function() {
				initNativeObjects();
				//showSoftInput();   //这里是显示搜素（默认点击    focus ）
			});

			//默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
			contents.querySelector('.mui-control-content').classList.add('mui-active');
		</script>
	</body>

</html>